import { computed, onBeforeUnmount, ref } from 'vue';

import { message } from 'ant-design-vue';
import { io, Socket } from 'socket.io-client';

/**
 * Socket.IO连接管理组合式函数
 * 负责建立、维护和清理Socket.IO连接
 */
export function useSocketConnection(userId?: number | string) {
  // Socket.IO客户端实例
  const socketClient = ref<null | Socket>(null);

  // 连接状态的计算属性
  const isConnected = computed(() => socketClient.value?.connected ?? false);

  // 初始化Socket.IO连接
  const initSocketConnection = () => {
    if (socketClient.value) {
      // 如果已存在连接，先断开
      socketClient.value.disconnect();
    }

    try {
      // 连接Socket.IO服务器，携带userId参数
      socketClient.value = io(`127.0.0.1:9021?userId=${userId}`);

      // 处理连接事件
      socketClient.value.on('connect', () => {
        console.error('Socket.IO连接成功');
      });

      // 处理断开连接事件
      socketClient.value.on('disconnect', () => {
        console.error('Socket.IO连接断开');
      });

      // 添加全局事件监听，用于调试
      socketClient.value.onAny((eventName, ...args) => {
        console.error(`接收到事件: ${eventName}，数据:`, args);
      });

      // 处理连接错误
      socketClient.value.on('connect_error', (error) => {
        console.error('Socket.IO连接错误:', error);
        message.error('连接服务器失败，将使用普通模式');
      });

      return true;
    } catch (error) {
      console.error('初始化Socket.IO连接失败:', error);
      message.error('连接服务器失败，将使用普通模式');
      return false;
    }
  };

  // 断开Socket.IO连接
  const disconnectSocket = () => {
    if (socketClient.value) {
      // 移除所有事件监听器
      socketClient.value.offAny();
      socketClient.value.disconnect();
      socketClient.value = null;
    }
  };

  // 组件卸载时自动清理资源
  onBeforeUnmount(() => {
    disconnectSocket();
  });

  return {
    socketClient,
    isConnected,
    initSocketConnection,
    disconnectSocket,
  };
}
